import { defineComponent, onMounted, onUnmounted, ref } from "vue";
import { focusStore } from "../../store";
import config from "../../path/config";
import { getUUid } from "@/focus/path/until";
import lodash from "lodash"
import "./index.less"
export default defineComponent({
  name: "focus-box",
  emits: [],
  props: {

  },

  setup() {
    const provide = focusStore.provide()
    const uid = ref<string>(getUUid())
    function onSwitchKeyDown(ev: KeyboardEvent) {
      provide.changekeyValue(ev)
    }
    const throttleOnKeyDown = lodash.throttle(onSwitchKeyDown, config.throttleKeyDownTime)
    onMounted(() => {
      window.addEventListener("keydown", throttleOnKeyDown)
    })
    onUnmounted(() => {
      window.removeEventListener("keydown", throttleOnKeyDown)
    })
    return {
      uid,
      provide,
    }
  },
  render() {
    return (
      <div ref="domRef" id={this.uid} class="focus-page pagewh">
        {this.$slots.default}
        {this.provide.state.popupList.value.map(({ Popupele }) => <Popupele></Popupele>)}
      </div>
    );
  }
})
